<template>
  <div class="fsc-main">
    <div class="slot-wrap" v-for="(slotItem, sidebarIndex) in sidebardata" :key="sidebarIndex">
      <div class="slot-row">
        <template v-if="!appoRepair">
          <fscsidebar
            :sidebardata="slotItem"
            :is-time-title="isTimeTitle"
            :is-time-slot="isTimeSlot"
            :row-height="rowHeight"
            @sidebarHideChange="sidebarHideChange(sidebarIndex)"
          ></fscsidebar>
          <template>
            <div v-if="slotItem.sidebarHide" class="slot-col" :style="{height: slotItem.barHeight+'px'}">
              <ul class="fsc-line-gird" :title="slotItem.special?'时令班次未设置时间段':'时令班次设置时段'">
                <li>时段数：{{calBCScheduleNum(scheduledata, sidebarIndex)}}</li>
                <li>
                  <div class="btn-show" @click="sidebarHideChange(sidebarIndex)">展开<i class="el-icon-arrow-down"></i></div>
                </li>
              </ul>
            </div>
            <template v-else>
              <div
                class="slot-col"
                :style="{height: slotItem.barHeight+'px'}"
                v-for="(appo, scheduleIndex) in scheduledata"
                :key="scheduleIndex"
              >
                <div>
                  <template>
                    <div
                      class="appo-box"
                      v-for="(sItem, appoIndex) in appo.appointment[sidebarIndex]"
                      :key="appoIndex"
                      :style="sItem?sItem.appoStyle:''"
                    >
                      <template v-if="!sItem.isAddBox">
                        <div
                          class="appo-itembox"
                          v-if="
                            sItem && ( (sItem.appointmentStatus && statusFilter.indexOf(sItem.appointmentStatus)>=0) ||
                              statusTemplate ==='template') ||
                              (!sItem.appointmentStatus && statusFilter.indexOf('计划排班')>=0)">
                          <fsItem
                            :item-size="sItem.appoSize>30 ? 'big' : 'mini'"
                            :s-item="sItem"
                            :appo-repair="appoRepair"
                            :appo-disable="appo.disable"
                            :checked="(checkedObj && sItem.id && checkedObj.id === sItem.id) || (checkedObj && !sItem.id && checkedObj.timestamp === sItem.timestamp)"
                            :is-edit="isEdit"
                            :status-template="statusTemplate"
                            :action-check-ids="actionCheckIds"
                            :sidebar-index="sidebarIndex"
                            :schedule-index="scheduleIndex"
                            :appo-index="appoIndex"
                            @appoClick="appoClick"
                            @appoDel="appoDel"
                            @openSourceInfoClick="openSourceInfoClick"
                          />
                        </div>
                      </template>
                    </div>
                  </template>
                </div>
                <div
                  class="slot-item"
                  :class="{checked: (appo.checkedAll&&isEdit ), slotRest: appo.rest, slotDisable: appo.disable && statusTemplate !== 'template'}"
                  v-for="(timeItem, timeIndex) in slotItem.timegather"
                  :key="timeIndex"
                  :style="{height: timeItem.heightpx}"
                  @mouseenter="appoAddEnter({sidebarIndex, scheduleIndex, timeIndex})"
                >
                  <div
                    class="appo-addbox"
                    v-if="
                      (statusTemplate === 'schedule' && isEdit && isAdd && !appo.disable) ||
                        (statusTemplate === 'template' && isEdit && isAdd )
                    ">
                    <div class="appo-add" :style="appoAddStyleObj" @click.stop="appoAdd({sidebarIndex, scheduleIndex, timeIndex})">
                      <i class="el-icon-plus"></i> {{quickTempObj?'插入号源模板':'新增号源'}}
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </template>
        </template>
        <!-- appoRepair一本都是true -->
        <template v-if="appoRepair">
          <div
            class="slot-col"
            v-for="(appo, scheduleIndex) in scheduledata"
            :key="scheduleIndex"
            :class="{
              slotDisable: appo.disable && statusTemplate !== 'template'
            }"
          >
            <template v-if="appo.appoInfoForStatistics">
              <div v-for="(it, index) in Object.keys(appo.appoInfoForStatistics.total)" :key="index">
                <div class="flex flex-row justify-between" style="padding: 8px 8px 0px 8px;" v-if="it == (appo.appointment[sidebarIndex].length && appo.appointment[sidebarIndex][0].checkClass)">
                  <!-- 勾选半天的checkbox -->
                  <el-checkbox v-if="(!overdue && isEdit && checkboxShow) || statusTemplate === 'template'" v-permission="['YJYY10001001002', 'YJYY10008002001']" v-model="appo.checkedAllHalf[sidebarIndex]" @change="checkAllHalfDay(appo, scheduleIndex, sidebarIndex)"></el-checkbox>
                  <!-- v-model="appo.checkedAllHalf[sidebarIndex]" -->
                  <el-popover
                    placement="top-start"
                    title=""
                    width="240"
                    trigger="hover">
                    <div class="total_s">
                      <template v-if="statusTemplate==='schedule'">
                        <div>号源总数：<span class="span_num">{{appo.appointmentTotal + appo.appointmentCallTotal}}</span></div>
                        <div>已预约/未预约：<span class="span_num">{{appo.appointmentCallTotal}}/{{appo.appointmentTotal}}</span></div>
                        <template v-if="appo.appoInfoForStatistics">
                          <div v-for="(it, index) in Object.keys(appo.appoInfoForStatistics.total)" :key="index">
                            {{it}}：
                            <span class="span_num">{{appo.appoInfoForStatistics.callNum[it] ? appo.appoInfoForStatistics.callNum[it] : 0}}/{{appo.appoInfoForStatistics.total[it]}}</span>
                          </div>
                        </template>
                        <div>增强号源(已预约/未预约)：<span class="span_num">{{appo.appointmentCallTotalZq}}/{{appo.appointmentTotalZq}}</span></div>
                        <template v-if="appo.appoInfoForStatistics">
                          <div v-for="(it1, index1) in Object.keys(appo.appoInfoForStatistics.zqNum)" :key="index1 + it1">
                            {{it1}}：
                            <span class="span_num">{{appo.appoInfoForStatistics.callNumZq[it1] ? appo.appoInfoForStatistics.callNumZq[it1] : 0}}/{{appo.appoInfoForStatistics.zqNum[it1]}}</span>
                          </div>
                        </template>
                      </template>
                      <template v-else>
                        <div class="font-bold">{{it}}</div>
                        <div>号源总数：<span class="span_num">{{appo.appoInfoForStatistics.total[it]}}</span></div>
                        <div>增强号源：<span class="span_num">{{appo.appoInfoForStatistics.zqNum[it]}}</span></div>
                      </template>
                    </div>
                    <span slot="reference">
                      <span class="fs-12 c666" v-if="statusTemplate==='schedule'">{{appo.appoInfoForStatistics.callNum[it] ? appo.appoInfoForStatistics.callNum[it] : 0}}/{{appo.appoInfoForStatistics.total[it]}}</span>
                      <span class="fs-12 c666" v-else>
                        {{appo.appoInfoForStatistics.zqNum[it] ? appo.appoInfoForStatistics.zqNum[it] : 0}}/{{appo.appoInfoForStatistics.total[it]}}
                      </span>
                    </span>
                  </el-popover>
                </div>
              </div>
            </template>
            <div
              class="slot-item"
              :class="{
                checked: (appo.checkedAll&&isEdit ),
                slotRest: appo.rest,
                slotDisable: appo.disable && statusTemplate !== 'template'
              }"
            >
              <div
                v-for="(sItem, appoIndex) in appo.appointment[sidebarIndex]"
                :key="appoIndex"
              >
                <!-- 可新增号源的时候所显示的 -->
                <template v-if="sItem.isAddBox">
                  <div class="appo-addbox">
                    <div class="appo-add-hover">
                      <div
                        v-if="
                          (statusTemplate === 'schedule' && isEdit && isAdd && !appo.disable) ||
                            (statusTemplate === 'template' && isEdit && isAdd )"
                        class="appo-add-line"
                        @click.stop="appoAddLine({sidebarIndex, scheduleIndex, timeIndex: 0, appoNew: sItem })">
                        <!-- <span style="margin-right: 10px;">{{sItem.time}}</span> -->
                        <!-- <i class="el-icon-plus"></i>{{quickTempObj?'插入号源模板':'新增号源add'}} -->
                        <i class="el-icon-plus"></i>{{quickTempObj?'插入号源模板':'新增号源'}}
                        <!-- {{sidebarIndex}}{{sItem}} -->
                        <!-- {{statusTemplate}} -->
                        <!-- {{sItem}}{{statusTemplate}}{{sItem.appointmentStatus}} -->
                      </div>
                    </div>
                  </div>
                </template>
                <!-- statusFilter：暂停预约、节假日、正常预约、设备故障、计划排班 -->
                <template
                  v-else-if="sItem && ( (sItem.appointmentStatus && statusFilter.indexOf(sItem.appointmentStatus)>=0) ||
                    statusTemplate ==='template') ||
                    (!sItem.appointmentStatus && statusFilter.indexOf('计划排班')>=0)">
                  <!-- {{sItem}}{{statusTemplate}}{{sItem.appointmentStatus}} -->
                  <!-- <div class="lqtqwe">{{appo.appoInfoForStatistics}}</div> -->
                  <fsItem
                    :overdue="overdue"
                    :item-size="sItem.appoSize>30 && !appoRepair ? 'big' : 'mini'"
                    :s-item="sItem"
                    :appo-repair="appoRepair"
                    :appo-disable="appo.disable"
                    :checked="(checkedObj && sItem.id && checkedObj.id === sItem.id) || (checkedObj && !sItem.id && checkedObj.timestamp === sItem.timestamp)"
                    :is-edit="isEdit"
                    :all-ckb="allCkb"
                    :checkbox-show="checkboxShow"
                    :status-template="statusTemplate"
                    :action-check-ids="actionCheckIds"
                    :sidebar-index="sidebarIndex"
                    :schedule-index="scheduleIndex"
                    :appo-index="appoIndex"
                    @appoClick="appoClick"
                    @checkBoxChange="checkBoxChange"
                    @appoDel="appoDel"
                    @openSourceInfoClick="openSourceInfoClick"
                  />
                </template>
              </div>
            </div>
          </div>
        </template>
      </div>
      <!-- <div class="divider" v-if="sidebarIndex<sidebardata.length-1"></div> -->
    </div>
  </div>
</template>

<script>
import fscsidebar from './fscsidebar'
import fsItem from './fsItem'
export default {
  // inject: ['sidebardataArr'],
  components: {
    fscsidebar,
    fsItem
  },
  props: {
    overdue: Boolean,
    checkboxShow: Boolean,
    scheduledata: {
      type: Array,
      default: null
    },
    sidebardata: {
      type: Array,
      default() {
        return []
      }
    },
    allCkb: {
      type: Boolean,
      default: false
    },
    rowHeight: {
      type: Number,
      default: 64
    },
    // 是否可编辑
    isEdit: {
      type: Boolean,
      default: false
    },
    // 是否可添加
    isAdd: {
      type: Boolean,
      default: true
    },
    // 模板排列，定位、日按顺序排
    appoRepair: {
      type: Boolean,
      default: false
    },
    // 判断需要显示的数据
    statusFilter: {
      type: String,
      default: ''
    },
    statusTemplate: {
      type: String,
      default: 'schedule'
    },
    // 快速排班的号源条件模板数据
    quickTempObj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      isTimeTitle: false, // 是否显示时段名称
      isTimeSlot: true, // 是否显示时段
      // rowHeight: 64 // 主体格子的高度设置
      appoAddStyleObj: {
        height: '100%',
        top: 0
      },
      checkedObj: null,
      hoverObjAppo: {},
      actionCheckIds: []
    }
  },
  created() {
    // // console.log('######################打印当前状态过滤条件statusFilter###################', this.statusFilter)
    const dmbIds = this.$route.query.listDmbId
    // // console.log('dmbIds', dmbIds)
    if (dmbIds) {
      this.actionCheckIds = (dmbIds + '').split(',')
    }
  },
  mounted() {
    // // console.log('checkbox-show', this.checkboxShow)
    // // console.log('mounted_appoRepair', this.appoRepair)
    // // console.log('mounted_scheduledata_in_fscmain.vue', this.scheduledata)
  },
  methods: {
    halfDayChange(e) {
      // console.log('halfDayChange=>e', e)
    },
    checkAllHalfDay(appo, scheduleIndex, sidebarIndex) {
      // console.log('this.$emit=>checkAllHalfDay')
      this.$emit('checkAllHalfDay', { appo, scheduleIndex, sidebarIndex })
    },
    openSourceInfoClick(data) {
      // 鼠标右键打开时段号源信息
      this.$emit('openSourceInfoDialog', data)
    },
    // 单击空新增排班
    slotClick(data) {
      // {sidebarIndex, appo, scheduleIndex, timeItem, timeIndex}
      this.$emit('slotClick', data)
    },
    // item勾选状态改变
    checkBoxChange(data) {
      this.$emit('checkBoxChange', data)
    },
    // 单击当前排班
    appoClick(data) {
      // // console.log('单击当前排班', data)
      this.checkedObj = { ...data.sItem }
      // // console.log('appoClick>>>', this.checkedObj)
      this.$emit('appoClick', { info: data })
    },
    // 删除，排班号源
    appoDel(data) {
      // {sidebarIndex, appo, scheduleIndex, timeItem, timeIndex}
      this.$emit('appoDel', data)
    },
    // 增加，排班号源
    appoAdd(data) {
      this.checkedObj = null
      this.$emit('appoAdd', data)
    },
    // 新增号源点击事件
    appoAddLine(data) {
      this.checkedObj = null
      this.$emit('appoAdd', data)
    },
    // 监听新增排班号源，鼠标移入计算添加排班 dom 的样式 style
    appoAddEnter(data) {
      // // // console.log('appoAddEnter:====', data)
      const { sidebarIndex, scheduleIndex, timeIndex } = data
      const curTime = this.sidebardata[sidebarIndex].timegather[timeIndex]
      const colAppos = this.scheduledata[scheduleIndex].appointment[sidebarIndex]
      const minTime = curTime.time.split('-')[0]
      const maxTime = curTime.time.split('-')[1]
      const Len = colAppos.length

      if (Len === 0) {
        // 如果当前时段没有已添加号源执行
        this.appoAddStyleObj = {
          height: '100%',
          top: 0
        }
      } else {
        // 如果当前时段没有已添加号源执行
        let maxMin = maxTime.split(':')[0] * 60 + maxTime.split(':')[1] * 1
        let minMin = minTime.split(':')[0] * 60 + minTime.split(':')[1] * 1
        const maxMinZ = maxTime.split(':')[0] * 60 + maxTime.split(':')[1] * 1
        const minMinZ = minTime.split(':')[0] * 60 + minTime.split(':')[1] * 1
        for (let i = 0; i < Len; i++) {
          let startMin = colAppos[i].beginTime.split(':')[0] * 60 + colAppos[i].beginTime.split(':')[1] * 1
          let endMin = colAppos[i].endTime.split(':')[0] * 60 + colAppos[i].endTime.split(':')[1] * 1
          if (startMin <= minMin && endMin <= maxMin && endMin > minMin) {
          // if (startMin <= minMin && endMin <= maxMin) {
            // 与已存在号源下相交，则当前最小值=相交元素的最大值
            minMin = endMin
          }
          if (startMin >= minMin && endMin >= maxMin && startMin < maxMin) {
          // if (startMin >= minMin && endMin >= maxMin) {
            // 与已存在号源上相交，则当前最大值=相交元素的最小值
            maxMin = startMin
          }
        }
        if (maxMinZ === maxMin && minMinZ === minMin) {
          // 与已存在号源没有相交执行
          this.appoAddStyleObj = {
            height: '100%',
            top: 0
          }
        } else if (maxMin > minMin && maxMinZ !== maxMin && minMinZ === minMin || maxMin > minMin && maxMinZ === maxMin && minMinZ !== minMin) {
          // 上方循环计算后值如果有变化执行
          let height = ((maxMin - minMin) * this.rowHeight / 60) - 8 + 'px'
          let top = minMinZ === minMin ? 0 : ((minMin - minMinZ) * this.rowHeight / 60) + 13 + 'px'
          this.appoAddStyleObj = {
            height: height,
            top: top
          }
        } else {
          this.appoAddStyleObj = {
            height: '100%',
            top: 0
          }
        }
      }
      // this.$refs.appoAdd
      // // // console.log(`'appoAdd${sidebarIndex + '' + scheduleIndex + '' + timeIndex}'`)
      // // // console.log(this.$refs[`'appoAdd${sidebarIndex + '' + scheduleIndex + '' + timeIndex}'`])
    },
    calBCScheduleNum(data, index) {
      let num = 0
      if (typeof data === 'object') {
        data.forEach(appo => {
          if (appo.appointment[index]) {
            num += appo.appointment[index].length
          }
        })
      }
      // // // console.log('calBCScheduleNum', num)
      return num
    },
    sidebarHideChange(data) {
      this.$emit('sidebarHideChange', data)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/fullschedule.scss';
</style>
